<template>
   <div>
      <MyHeader></MyHeader>
      <div style="width: 1100px;height:600px;margin: 20px auto;background-color:white;">
<!--         <a-radio-group v-model="tabPosition" style="margin:8px">-->
<!--            <a-radio-button value="top">-->
<!--               top-->
<!--            </a-radio-button>-->
<!--            <a-radio-button value="bottom">-->
<!--               bottom-->
<!--            </a-radio-button>-->
<!--            <a-radio-button value="left">-->
<!--               left-->
<!--            </a-radio-button>-->
<!--            <a-radio-button value="right">-->
<!--               right-->
<!--            </a-radio-button>-->
<!--         </a-radio-group>-->
         <a-tabs default-active-key="1" :tab-position="tabPosition">
            <a-tab-pane key="1" tab="我的主页">
               <h2>个人信息</h2>
               <br>
               <h2>昵称 <sub>修改</sub></h2>
               <br>
               <h3>{{name1}}</h3>
               <hr>
               <h2>手机号 <sub>修改</sub></h2>
               <br>
               <h3>{{phoneNumber}}</h3>
               <hr>
               <br>
               <h2>密码 <sub>修改</sub></h2>
               <h3>*******</h3>
               <br>

               <img :src="userInfo.avatarUrl" alt="" style="width: 300px">

               <!--      <input ref="avatar" @click="change" type="file">-->
               <a-upload
                       name="file"
                       action="/course-api/pcUser/updata/userAvatar"
                       @change="handleChange"
                       :showUploadList= "false"
               >
                  <a-button> <a-icon type="upload" />点击上传头像</a-button>
               </a-upload>
            </a-tab-pane>
            <a-tab-pane key="2" tab="我的课程">
               Content of Tab 2
            </a-tab-pane>
            <a-tab-pane key="3" tab="我的订单">
               Content of Tab 3
            </a-tab-pane>
         </a-tabs>
      </div>


   </div>
</template>

<script>
   import MyHeader from "../components/MyHeader";
   import {changeAvatar, getUserInfo} from "../api/api";

    export default {
       components:{
          MyHeader
       },
       name: "Mine",
       data(){
          return  {
             userInfo:{},
             tabPosition: 'left',
             name1:"",
             phoneNumber:""
          }
       },
       created() {
          getUserInfo().then(res=>{
             console.log(res)
             this.name1 =res.userInfo.nickname
             this.phoneNumber =res.userInfo.mobile
             this.userInfo = res.userInfo
          })
       },
       methods:{
          callback(val) {
             console.log(val);
          },
          handleChange(info) {
             if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
             }
             if (info.file.status === 'done') {
                this.userInfo = info.file.response.userInfo
                this.$message.success(info.file.response.msg);
             } else if (info.file.status === 'error') {
                this.$message.error(`${info.file.name} file upload failed.`);
             }
          },
         change(){
            console.dir(this.$refs.avatar)
            console.dir(this.$refs.avatar.files[0])
            changeAvatar(this.$refs.avatar.files[0]).then(res=>{
               // console.log(res)
               if(res.code ==0 ){
                  this.userInof =res.userInfo
               }
            })

         }
       },
    }
</script>

<style scoped>
sub{
   color: #00cf8c;
}
</style>